import React from 'react'
import { Row, Col, Image } from 'antd';
import outLine from "../../../icon/离线.png"
import outLine1 from "../../../icon/离线2.png"
import unbound from "../../../icon/未绑定.png"
import nonStandard from "../../../icon/安装不规范.png"
export default function ConentHeader() {
  const style = {
    background: 'white',
    padding: '15px',
    borderRadius: "5px",
    display: "flex"
  };
  return (
    <div>
      <Row gutter={16}>
        <Col className="gutter-row" span={6}>
          <div style={style}>
            <div style={{ flex: "1 1 200px" }}>
              <span>离线设备(ROMA)</span>
              <br></br>
              <span style={{ fontWeight: "bold" }}>
                <span style={{ fontSize: '30px' }}>2680</span>
                台</span>
            </div>
            <div style={{ flex: "1 1 120px", textAlign: "right", padding: "3px 0 0 0" }}>
              <Image src={outLine} style={{ height: "55px", width: "55px" }} />
            </div>
          </div>
        </Col>
        <Col className="gutter-row" span={6}>
          <div style={style}>
            <div style={{ flex: "1 1 200px" }}>
              <span>设备离线(设备管理组件)</span>
              <br></br>
              <span style={{ fontWeight: "bold" }}>
                <span style={{ fontSize: '30px' }}>12134</span>
                台</span>
            </div>
            <div style={{ flex: "1 1 120px", textAlign: "right", padding: "3px 0 0 0" }}>
              <Image src={outLine1} style={{ height: "55px", width: "55px" }} />
            </div>
          </div>
        </Col>
        <Col className="gutter-row" span={6}>
          <div style={style}>
            <div style={{ flex: "1 1 200px" }}>
              <span>未绑定物联卡</span>
              <br></br>
              <span style={{ fontWeight: "bold" }}>
                <span style={{ fontSize: '30px' }}>12343</span>
                台</span>
            </div>
            <div style={{ flex: "1 1 120px", textAlign: "right", padding: "3px 0 0 0" }}>
              <Image src={unbound} style={{ height: "55px", width: "55px" }} />
            </div>
          </div>
        </Col>
        <Col className="gutter-row" span={6}>
          <div style={style}>
            <div style={{ flex: "1 1 200px" }}>
              <span>APP安装不规范</span>
              <br></br>
              <span style={{ fontWeight: "bold" }}>
                <span style={{ fontSize: '30px' }}>4323</span>
                台</span>
            </div>
            <div style={{ flex: "1 1 120px", textAlign: "right", padding: "3px 0 0 0" }}>
              <Image src={nonStandard} style={{ height: "55px", width: "55px" }} />
            </div>
          </div>
        </Col>
      </Row>
    </div >
  )
}
